<template>
  <div id="app">
    <router-view/>
    <theme-picker/>
    <message-info ref="messageInfo"/>
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import webSocketOperation from '@/utils/webSocketOperation';
import MessageInfo from "@/components/messageInfo";

export default {
  name: "App",
  components: {MessageInfo, ThemePicker},
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  created() {
    // 提醒弹框会触发2次
    // webSocketOperation(this);
  },
  watch: {
    '$store.state.app.msgdata': {
      handler: function (newVal, oldVal) {
        console.log('newVal:', newVal)
        if (newVal) {
          this.$alert(newVal.info, '温馨提示', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            callback: action => {
              // 可以跳转到客户管理页面
            }
          });
        }
      },
      deep: true,
    },
    /* 下推消息推送 */
    '$store.state.app.pushdata': {
      handler: function (newVal, oldVal) {
        console.log('newVal:', newVal)
        if (newVal) {
          this.$alert(newVal.info, '温馨提示', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            callback: action => {
              // 可以跳转到客户管理页面
            }
          });
        }
      },
      deep: true,
    },

    /* 备忘录消息提醒 */
    '$store.state.app.memoRecorddata': {
      handler: function (newVal, oldVal) {
        console.log('newVal:', newVal)
        if (newVal) {
          this.$alert(newVal.info, '备忘录提醒', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            callback: action => {
              // 可以跳转到客户管理页面
            }
          });
        }
      },
      deep: true,
    },

    /* 点评消息提醒 */
    '$store.state.app.commnetRecorddata': {
      handler: function (newVal, oldVal) {
        console.log('newVal:', newVal)
        if (newVal) {
          this.$alert(newVal.info, '点评提醒', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            callback: action => {
              // 可以跳转到客户管理页面
            }
          });
        }
      },
      deep: true,
    },

    /* 公告 */
    '$store.state.app.noticedata': {
      handler: function (newVal, oldVal) {
        console.log('newVal:', newVal)
        if (newVal) {
          console.log('newVal:', "进来了")
          this.$refs.messageInfo.openDetailNoticeData('message_notice', '公告信息', newVal);
        }
      },
      deep: true,
    },

    /* 分配 */
    '$store.state.app.disMessage': {
      handler: function (newVal, oldVal) {
        console.log('newVal:', newVal)
        if (newVal) {
          this.$alert(newVal.info, '认领信息', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            callback: action => {
              // 可以跳转到客户管理页面
            }
          });
        }
      },
      deep: true,
    },

    // 渠道分配---给管理员
    '$store.state.app.channelPushDisAdmin': {
      handler: function (newVal, oldVal) {
        console.log('newVal:', newVal)
        if (newVal) {
          this.$alert(newVal.info, '渠道消息提醒', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            callback: action => {
              // 可以跳转到客户管理页面
            }
          });
        }
      },
      deep: true,
    },
    // 渠道分配---给业务员
    '$store.state.app.channelPushDisBus': {
      handler: function (newVal, oldVal) {
        console.log('newVal:', newVal)
        if (newVal) {
          this.$alert(newVal.info, '渠道消息提醒', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            callback: action => {
              // 可以跳转到客户管理页面
            }
          });
        }
      },
      deep: true,
    },
  }
};
</script>
<style scoped>
</style>
<style rel="stylesheet/scss" lang="scss">
.el-drawer__header{
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #dcdfe6;
  box-shadow: 0px -4px 8px 0px rgba(0,0,0,0.06);
}
.el-dialog__header{
  border-bottom: 1px solid #dcdfe6;
  box-shadow: 0px -4px 8px 0px rgba(0,0,0,0.06);
}
.el-button{
  margin: 1px 5px 5px 2px !important;
}
</style>
